<template>
  <view :class="`flex-col page` + ' ' + move">
    <view class="flex-col group">
      <view class="flex-row justify-center items-start self-stretch relative group_2" style="height: 120rpx;">
				<image
					class="image pos"
					@click="naviBack"
					src="@/static/images/codefun/99b216e00af1cd6163d378fa9057a6f2.png"
				/>
				<view class="flex-col items-center group">
				  <text class="text">{{roomName+' : '+roomType}}</text>
				</view>
      </view>
      <text class="self-start text_13">我的设备</text>
      <view class="flex-col self-stretch group_8" v-for="(item, index) in devicesArray" :key="index" @click="clickDevice(item)">
        <view class="flex-row justify-between items-center relative section_4">
          <view class="flex-row">
            <view class="flex-col justify-start items-center image-wrapper">
              <image
                class="image_8"
                :src="fetchImageUrl(item)"
              />
            </view>
            <view class="flex-col items-start group_9 ml-21">
              <text class="font_2 text_14">{{matchDevices(item).type}}</text>
              <text class="font_6 text_16 mt-15">1设备</text>
            </view>
          </view>
          <view class="flex-row items-center section_5">
            <view class="shrink-0 section_6"></view>
            <text class="font_5 text_15 ml-5">Off</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
		import { deviceChooser, deviceMatcher } from "@/utils/device/device.js";
  export default {
    components: {},
    props: {},
    data() {
      return {
				roomName: '111',
				roomType: '',
				devicesArray: [31,32,33,34,35,36,37,38,41,42],
				move: 'move-in'
			};
    },
		onLoad(option) {
			this.roomType = option.roomType
			this.roomName = option.roomName
			console.log(this.roomType)
			console.log(this.fetchImageUrl(33))
			// this.$tab.navigateTo(deviceChooser(32,'a1'))
		},
		computed: {

		},
    methods: {
			matchDevices(deviceTypeNumber){
				let deviceInfo = deviceMatcher(deviceTypeNumber)
				return deviceInfo
			},
			clickDevice(deviceTypeNumber){
				this.$tab.navigateTo(deviceChooser(deviceTypeNumber,this.roomType,this.roomName))
			},
			fetchImageUrl(deviceTypeNumber){
				return `/static/images/icons/${this.matchDevices(deviceTypeNumber).typeEng}.png` // 动态路径不能用@符号！！！
			},
			naviBack(){
				this.move = 'move-out'
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			}
		},
  };
</script>

<style lang="scss">
	@import url("@/css/common.css");
	.mt-25 {
	  margin-top: 50rpx;
	}
	.ml-11 {
	  margin-left: 22rpx;
	}
	.mt-15 {
	  margin-top: 30rpx;
	}
	.ml-5 {
	  margin-left: 10rpx;
	}
	.ml-21 {
	  margin-left: 42rpx;
	}
	.page {
	  padding-top: 20rpx;
	  background-color: #ffffff;
	  height: 100%;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  .group {
	    padding: 0 40rpx;
	    .group_2 {
	      padding: 4rpx 0 2rpx;
	      .image {
	        box-shadow: 0rpx 10rpx 10rpx #00000012;
	        border-radius: 50%;
					margin-top: 25rpx;
	        width: 96rpx;
	        height: 96rpx;
	      }
	      .pos {
	        position: absolute;
	        left: 0;
	        top: 85rpx;
	        transform: translateY(-50%);
	      }
	      .text {
	        color: #273240;
	        font-size: 44rpx;
	        font-family: Poppins;
					text-align: center;
	        line-height: 41.28rpx;
					position: absolute;
					width: 300rpx;
					left: 30%;
					top: 85rpx;
	      }
	    }
	    .section {
	      margin-top: 112rpx;
	      padding: 14rpx 28rpx 44rpx;
	      background-image: linear-gradient(114.1deg, #0095ff -0.6%, #0069b4 99.1%);
	      border-radius: 20rpx;
	      .group_3 {
	        padding: 92rpx 0 48rpx;
	        .pos_4 {
	          position: absolute;
	          left: 0;
	          bottom: -1.4210854715202004e-28rpx;
	          .text_2 {
	            color: #ffffff;
	            font-size: 74.28rpx;
	            font-family: Poppins;
	            font-weight: 700;
	            line-height: 55.34rpx;
	          }
	          .font {
	            font-size: 42.44rpx;
	            font-family: Poppins;
	            font-weight: 700;
	            color: #ffffff;
	          }
	          .text_3 {
	            line-height: 15.36rpx;
							margin: 140rpx 0 0 48rpx;
	          }
	          .text_4 {
	            line-height: 24.28rpx;
	          }
	          .image_3 {
	            width: 8rpx;
	            height: 10rpx;
	          }
	          .image_4 {
	            margin-left: 156rpx;
	          }
	          .text_6 {
	            margin-left: -24rpx;
	            line-height: 18.54rpx;
	          }
	          .text_7 {
	            line-height: 24.1rpx;
	            opacity: 0.8;
	          }
	          .text_9 {
	            margin-left: 12rpx;
	            margin-top: 16rpx;
	            line-height: 18.98rpx;
	          }
	        }
	        .text_5 {
	          color: #ffffff;
	          font-weight: 700;
	          line-height: 30.04rpx;
	        }
	        .group_4 {
	          width: 128rpx;
	          .image_2 {
	            filter: blur(7rpx);
	            width: 128rpx;
	            height: 128rpx;
	          }
	          .section_2 {
	            background-color: #ffe710;
	            box-shadow: 0rpx 8rpx 10rpx #ffffff inset, 0rpx 32rpx 16rpx #ffa530 inset;
	            border-radius: 50%;
	            width: 106.66rpx;
	            height: 106.66rpx;
	          }
	          .pos_3 {
	            position: absolute;
	            left: 50%;
	            top: 50%;
	            transform: translate(-50%, -50%);
	          }
	          .text_8 {
	            font-size: 28rpx;
	            line-height: 25.74rpx;
	          }
	        }
	        .pos_2 {
	          position: absolute;
	          right: 0;
	          top: 50%;
	          transform: translateY(-50%);
	        }
	        .font_4 {
	          font-size: 26rpx;
	          font-family: Poppins;
	          line-height: 24.28rpx;
	          color: #ffffff;
	        }
	      }
	      .group_5 {
	        padding: 0 20rpx;
	        .image_5 {
	          width: 32rpx;
	          height: 28rpx;
	        }
	        .text_10 {
	          line-height: 18.86rpx;
	        }
	        .section_3 {
	          background-color: #ffffff;
	          width: 2rpx;
	          height: 42rpx;
	        }
	        .view {
	          margin-left: 64rpx;
	        }
	        .group_6 {
	          width: 230rpx;
	          .image_6 {
	            margin-left: 72rpx;
	            width: 22rpx;
	            height: 28rpx;
	          }
	          .text_11 {
	            line-height: 19.5rpx;
	          }
	        }
	        .group_7 {
	          margin-left: 68rpx;
	          .image_7 {
	            width: 28rpx;
	            height: 28rpx;
	          }
	          .text_12 {
	            line-height: 19.1rpx;
	          }
	        }
	      }
	    }
	    .text_13 {
	      margin-top: 68rpx;
	      color: #000000;
	      font-size: 36rpx;
	      font-family: Poppins;
	      line-height: 33.7rpx;
	    }
	    .group_8 {
	      margin-top: 30rpx;
	      .section_4 {
	        padding: 32rpx 40rpx;
	        background-color: #ffffff;
	        border-radius: 20rpx;
	        box-shadow: 10rpx 8rpx 80rpx #00000014;
	        .image-wrapper {
	          padding: 26rpx 0;
	          background-image: url('@/static/images/codefun/ff7a2751cec087d4ff5bcf5ffcfa1853.png');
	          background-size: 100% 100%;
	          background-repeat: no-repeat;
	          width: 100rpx;
	          height: 100rpx;
	          .image_8 {
	            width: 48rpx;
	            height: 48rpx;
	          }
	        }
	        .group_9 {
	          margin: 8rpx 0 8rpx 20rpx;
	          .text_14 {
	            line-height: 29.86rpx;
	          }
	          .text_16 {
	            line-height: 29.54rpx;
	          }
	        }
	        .section_5 {
	          padding: 6rpx 4rpx;
	          background-color: #cccccc;
	          border-radius: 20rpx;
	          height: 44rpx;
	          .font_5 {
	            font-size: 26rpx;
	            font-family: Poppins;
	            line-height: 18.56rpx;
	            color: #f7f7f7;
	          }
	          .text_15 {
	            font-size: 24rpx;
	          }
						.text_18 {
						  font-size: 24rpx;
						}
	        }
	        .image-wrapper_2 {
	          padding: 16rpx 0;
	          background-color: #f7f7f7;
	          border-radius: 50%;
	          width: 100rpx;
	          height: 100rpx;
	          .image_9 {
	            width: 64rpx;
	            height: 64.5rpx;
	          }
	        }
	        .group_10 {
	          margin: 4rpx 0 8rpx;
	          .text_17 {
	            line-height: 29.96rpx;
	          }
	        }
	        .font_6 {
	          font-size: 32rpx;
	          font-family: Poppins;
	          line-height: 29.64rpx;
	          color: #838080;
	        }
	        .section_7 {
	          padding: 6rpx 8rpx;
	          background-color: #cccccc;
	          border-radius: 20rpx;
	          height: 44rpx;
	        }
	        .section_6 {
	          background-color: #f7f7f7;
	          border-radius: 50%;
	          width: 32rpx;
	          height: 32rpx;
	        }
	        .image_10 {
	          width: 100rpx;
	          height: 100rpx;
	        }
	        .group_11 {
	          margin: 4rpx 0 8rpx;
	          .text_19 {
	            line-height: 29.88rpx;
	          }
	        }
	        .text_20 {
	          line-height: 29.8rpx;
	        }
	      }
	    }
	    .font_2 {
	      font-size: 32rpx;
	      font-family: Poppins;
	      line-height: 29.64rpx;
	      color: #273240;
				.text_33 {
				  line-height: 15.36rpx;
					// margin: 140rpx 0 0 48rpx;
				}
	    }
	    .font_3 {
				font-size: 26rpx;
				font-family: Poppins;
				line-height: 18.56rpx;
				color: #f7f7f7;
	    }
	  }
	  .section_8 {
	    margin-top: -80rpx;
	    padding: 52rpx 0;
	    background-color: #f7f7f7;
	    border-radius: 60rpx 60rpx 0rpx 0rpx;
	    .equal-division-item {
	      width: 46.6rpx;
	      height: 46.6rpx;
	    }
	  }
	}
	
	
</style>